<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <template>
              <div style="width:100%;">
                  <div style="float:left;">
                      <table style="font-size:12px" class="table1style">
                          <tr>
                              <td>
                                  标本日期
                              </td>
                              <td>
                                  <el-date-picker type="date" placeholder="选择日期" v-model="SampleDate" value-format="yyyy-MM-dd" style="width: 130px;"></el-date-picker>
                              </td>
                              <td>
                                  报告单元
                              </td>
                              <td>
                                  <rm-ddl-rptunit prgno="LIS326" v-model="rptunitid" width="120px" defaultflag="1" @change="rptunitChange" ref="rptunit"></rm-ddl-rptunit>
                              </td>
                              <td>
                                  标本号
                              </td>
                              <td>
                                  <el-input size="small" style="width:130px;" v-model="SampleNo"></el-input>
                              </td>
                              <td>
                                  <el-button @click="UpdSampleNo">重新分配</el-button>
                              </td>
                              <td>
                                  <el-checkbox v-model="checked">覆盖原有数据</el-checkbox>
                              </td>
                          </tr>
                      </table>
                  </div>
                  <div style="float:right;">
                      <table style="float:right">
                          <tr>
                              <td>
                                  <el-button @click="btnAdd" icon="el-icon-plus">导入</el-button>
                              </td>
                              <td>
                                  <el-button @click="btnSave" icon="el-icon-document">存盘</el-button>
                              </td>
                              <td>
                                  <el-button @click="setting()" icon="el-icon-setting">设置</el-button>
                              </td>
                          </tr>
                      </table>
                  </div>
              </div>
          </template>
      </div>
      <div class="pagecenter">
          <div class="middle-center" style="height:100%;">
              <vxe-table :data.sync="tableData" border fit :mouse-config="{selected: true}" height="auto" header-align="center" highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                  <vxe-table-column type="index" title="NO." width="40"></vxe-table-column>
                  <vxe-table-column field="res" title="操作" width="120">
                      <template v-slot="{ row }">
                          <span v-if="row.res!='成功'" style="color:red">{{row.res}}</span>
                          <span v-else>{{row.res}}</span>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column field="SampleDate" title="标本日期" width="60"></vxe-table-column>
                  <vxe-table-column field="SampleNo" title="标本编号" width="60"></vxe-table-column>
                  <vxe-table-column field="PAT_NAME" title="病人姓名" width="60"></vxe-table-column>
                  <vxe-table-column field="PAT_NO" title="病人号" width="60"></vxe-table-column>
                  <vxe-table-column field="PAT_SEX" title="性别" width="50"></vxe-table-column>
                  <vxe-table-column field="Pat_AgeStr" title="年龄"></vxe-table-column>
                  <vxe-table-column field="PAT_TYPECODE" title="病人类别" width="60"></vxe-table-column>
                  <vxe-table-column field="REQ_DEPTNO" title="申请科室" width="60"></vxe-table-column>
                  <vxe-table-column field="REQ_DOCNO" title="申请医生" width="60"></vxe-table-column>
                  <vxe-table-column field="REQ_REASON" title="送检目的" width="60"></vxe-table-column>
                  <vxe-table-column field="REQ_WardNo" title="病人病区" width="60"></vxe-table-column>
                  <vxe-table-column field="REQ_BEDNO" title="床号"></vxe-table-column>
                  <vxe-table-column field="CHARGE_TYPENO" title="收费类别" width="60"></vxe-table-column>
                  <vxe-table-column field="PAT_DIAG" title="临床诊断" width="60"></vxe-table-column>
                  <vxe-table-column field="PAT_PHONE" title="联系电话" width="60"></vxe-table-column>
                  <vxe-table-column field="Pat_Birth" title="病人生日" width="60"></vxe-table-column>
                  <vxe-table-column field="pat_AgeYear" title="岁数"></vxe-table-column>
                  <vxe-table-column field="hospcode" title="送检医院" width="60"></vxe-table-column>
                  <vxe-table-column field="RptUnitID" title="报告单元" width="60">
                      <template v-slot="{ row }">
                          <span>{{row.RptUnitName}}</span>
                          <span>[{{row.RptUnitID}}]</span>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column field="ReportID" title="报告ID" width="60"></vxe-table-column>
                  <vxe-table-column field="Specimen_CODE" title="标本类型代码" width="80"></vxe-table-column>
                  <vxe-table-column field="Specimen_NAME" title="标本类型名称" width="80"></vxe-table-column>
                  <vxe-table-column field="PAT_IDCardNO" title="身份证号" width="60"></vxe-table-column>
                  <vxe-table-column field="PAT_Nation" title="民族国籍" width="60"></vxe-table-column>
                  <vxe-table-column field="SAMPLED_DT" title="采样时间" width="60"></vxe-table-column>
                  <vxe-table-column field="Recieve_dt" title="接收时间" width="60"></vxe-table-column>
                  <vxe-table-column field="PAT_ADDRESS" title="地址" width="60"></vxe-table-column>
                  <vxe-table-column field="Report_Comm" title="报告备注" width="60"></vxe-table-column>
                  <vxe-table-column field="LAB_Advice" title="实验室意见" width="100"></vxe-table-column>
              </vxe-table>
          </div>
      </div>

      <el-dialog title="文件导入提示" :visible.sync="isshow" width="30%">
          <el-form :model="form">
              <div>

              </div>
              <div class="edit">
                  <div style="line-height: 32px">
                      <span style="width: 94px; display: inline-block; text-align: right">方案选择：</span>
                      <el-select ref="rptitemRef" v-model="fileimport" placeholder="请选择导入方案" filterable @change="fileimportChange" :popper-append-to-body="false" popper-class="mini-select">
                          <el-option v-for="(item, index) in fileimportList" :key="index" :label="item.fileimportname" :value="item.fileimportid">
                          </el-option>
                      </el-select>
                  </div>
              </div>

              <el-form-item label="上传文件" :label-width="formLabelWidth">
                  <el-upload ref="uploadDat" action="" :limit=limitNum :auto-upload="false" :accept="'.'+tmpfileimp.filetype" :before-upload="beforeUploadFile" :on-change="fileChange" :on-exceed="exceedFile" :file-list="fileList">
                      <el-button size="small" plain>选择文件</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传{{tmpfileimp.filetype}}文件，且不超过10M</div>
                  </el-upload>
              </el-form-item>
              <div style="display:none">
                  <button type="button" @click="isSuccess">
                      <span>
                          {{text.btn.confirmBtnText}}
                      </span>
                  </button>
              </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="uploadFile">立即导入</el-button>
              <el-button @click="isshow = false">取 消</el-button>
          </span>
      </el-dialog>

      <el-dialog width="auto" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="导入模板设置" :visible.sync="issetting">
          <div class="modelset-content">
              <div class="modelset-left">
                  <vxe-table ref="fileimportTable" :loading="loading" :data.sync="fileimportList" height="100%" border size="mini" resizable stripe show-overflow highlight-current-row header-align="center" @cell-click="CellDblclick" @current-change="currentChangeEvent">
                      <vxe-table-column field="fileimportname" sortable title="模版名称">
                      </vxe-table-column>
                  </vxe-table>
              </div>
              <div class="modelset-right">
                  <div class="model-param">
                      <span class="model-text">导入模板ID</span>
                      <el-input size="small" style="width:130px;" v-model="fileImpParam.fileimportid" disabled></el-input>
                      <span class="model-text">模板名称</span>
                      <el-input size="small" style="width:130px;" v-model="fileImpParam.fileimportname" :disabled="!isupdate"></el-input>
                      <span class="model-text">文件类型</span>
                      <el-select v-model="fileImpParam.filetype" placeholder="请选择文件类型" style="width:130px;" :disabled="!isupdate">
                          <el-option label="TXT" value="TXT"></el-option>
                          <el-option label="XLS" value="XLS"></el-option>
                          <el-option label="XLSX" value="XLSX"></el-option>
                      </el-select>
                  </div>
                  <div class="model-param">
                      <span class="model-text">数据起始行</span>
                      <el-input type="number" min="0" size="small" style="width:130px;" v-model="fileImpParam.startrow" :disabled="!isupdate"></el-input>
                      <span class="model-text">文件字符集</span>
                      <el-select v-model="fileImpParam.encoding" placeholder="请选择文件字符集" style="width:130px;" :disabled="!isupdate">
                          <el-option label="ANSI" value="ANSI"></el-option>
                          <el-option label="UTF8" value="UTF8"></el-option>
                          <el-option label="UTF16 LE" value="UTF16 LE"></el-option>
                          <el-option label="UTF16 BE" value="UTF16 BE"></el-option>
                      </el-select>
                      <span class="model-text">文件分隔符</span>
                      <el-select v-model="fileImpParam.splitchar" placeholder="请选择分隔符" style="width:130px;" :disabled="!isupdate">
                          <el-option label="," value=","></el-option>
                          <el-option label=";" value=";"></el-option>
                          <el-option label="SPACE" value="SPACE"></el-option>
                          <el-option label="TAB" value="TAB"></el-option>
                      </el-select>

                  </div>
                  <div class="model-param">
                      <span class="model-text">备注</span>
                      <el-input size="small" style="width:130px;" v-model="fileImpParam.note" :disabled="!isupdate"></el-input>
                  </div>

                  <vxe-table ref="colTable" :data.sync="colList" height="385" border size="mini" resizable stripe :sort-config="{trigger: 'cell'}" show-overflow highlight-current-row header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false, activeMethod: activeRowMethod}">
                      <vxe-table-column field="datacol" sortable title="对应数据列" width="170">
                          <template v-slot="{ row }">
                              <span>{{row.filecolname}}</span>
                              <span>[{{row.datacol}}]</span>
                          </template>
                      </vxe-table-column>
                      <vxe-table-column field="filecolseq" sortable title="文件列序号" width="130" :edit-render="{name: 'input', autoselect: true}">
                          <template v-slot:edit="{ row }">
                              <el-input type="number" min="0" size="small" style="width:130px;" v-model="row.filecolseq"></el-input>
                          </template>
                      </vxe-table-column>
                  </vxe-table>
                  <div class="modelset-btn">
                      <el-button v-show="!isupdate" @click="addSecFileImport" style="margin-left: 10px;">新增方案</el-button>
                      <el-button v-show="isupdate" @click="SaveRecord()">确认</el-button>
                      <el-button v-show="isupdate" @click="cancel()">取消</el-button>
                      <el-button v-show="!isupdate" @click="updSecFileImport">修改方案</el-button>
                      <el-button v-show="!isupdate" @click="btnDelete">删除方案</el-button>
                  </div>
              </div>

          </div>
      </el-dialog>

  </div>
</template>

<script type="text/javascript">
import axios from "axios";
export default {
  name: "LIS326",
  data() {
      return {
          tableData: [],
          colList: [],
          fileimportList: [],
          message: "",
          selectrow: [],
          curselectrow: "",
          rptunitid: "",
          rptunitname: "",
          SampleDate: "",
          SampleNo: "",
          actionindex: 0,
          tempindex: 0,
          loading: false,
          checked: false,
          limitNum: 1,
          formLabelWidth: "100px",
          form: {
              file: ""
          },
          fileImpParam: {},
          tmpfileimp: {},
          fileimport: "",
          fileList: [],
          isshow: false,
          text: {
              type: "文件上传",
              prgname: "LIS326",
              btn: {
                  confirmBtnText: "立即上传",
                  cancelBtnText: "取消"
              }
          },
          flag: "0",
          issetting: false,
          isupdate: false
      };
  },
  created() {
      this.initData();
  },
  mounted() {},
  updated() {},
  methods: {
      rptunitChange(code, name) {
          this.rptunitid = code;
          if (name) this.rptunitname = name;
          else this.getrptunitname();
      },
      getrptunitname() {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS326",
                  method: "post",
                  data: {
                      action: "getrptunitname",
                      rptunitid: this.rptunitid
                  }
              })
              .then(res => {
                  this.rptunitname = res.rptunitname;
              })
              .catch(e => {
                  console.log("error", e);
              });
      },
      UpdSampleNo() {
          if (this.SampleNo == "") {
              this.$message({
                  message: "请输入初始样本号！",
                  type: "warning"
              });
              return false;
          }
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS326",
                  method: "post",
                  data: {
                      action: "updsampleno",
                      tabledata: this.tableData,
                      sampleno: this.SampleNo
                  }
              })
              .then(res => {
                  this.tableData = res.data;
              })
              .catch(e => {
                  console.log("error", e);
              });
      },
      btnAdd() {
          this.isshow = true;
      },
      btnSave() {
          if (this.tableData.length > 0)
              this.$confirm("确定要向  " + this.rptunitname + "  导入 " + this.tableData.length + " 条数据吗？", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
              })
                  .then(() => {
                      this.$tool
                          .request({
                              url: "LIS/LIS3/LIS326",
                              method: "post",
                              data: {
                                  action: "save",
                                  tabledata: this.tableData,
                                  checked: this.checked
                              }
                          })
                          .then(res => {
                              if (res.errcode == "1") {
                                  this.tableData = res.data;
                                  this.$alert(this.rptunitname + " 导入完成，成功：" + res.sint + "条，失败：" + res.eint + "条");
                              } else this.$message.error(res.errmsg);
                          })
                          .catch(e => {
                              this.$message.error(e);
                              console.log("error", e);
                          });
                  })
                  .catch(() => {});
          else this.$message.error("无存盘数据！");
      },
      initData() {
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS326",
                  method: "post",
                  data: {
                      action: "getsettinglist"
                  }
              })
              .then(res => {
                  this.fileimportList = res.data;
                  if (this.fileimportList.length > 0) {
                      this.getcolList(this.fileimportList[0].fileimportid);
                      this.$refs.fileimportTable.setCurrentRow(this.fileimportList[0]);
                  }
                  this.SampleDate = res.date;
                  this.loading = false;
              })
              .catch(e => {
                  console.log("error", e);
              });
      },
      setting() {
          this.initData();
          this.issetting = true;
      },
      delSecFileImport() {
          this.actionindex = 3;
      },
      addSecFileImport() {
          this.isupdate = true;
          this.actionindex = 1;
          this.fileImpParam = {};
          this.colList.forEach(x => {
              x.filecolseq = 0;
          });
      },
      updSecFileImport() {
          this.isupdate = true;
          this.actionindex = 2;
      },
      activeRowMethod({ row, rowIndex }) {
          return this.isupdate;
      },
      fileimportChange(val) {
          this.tmpfileimp = this.fileimportList.filter(x => x.fileimportid == val)[0];
          this.fileList = [];
          this.form.file = "";
      },
      cancel() {
          this.$confirm("您确定要取消这次改动吗？", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
          })
              .then(() => {
                  this.initData();
                  this.getcolList(this.fileImpParam.fileimportid);
                  this.$refs.fileimportTable.setCurrentRow(this.fileImpParam);
                  this.isupdate = false;
              })
              .catch(e => {});
      },
      CellDblclick({ row }) {
          if (!this.isupdate) {
              this.getcolList(this.fileImpParam.fileimportid)
          }
      },
      currentChangeEvent({ row, column }) {
          if (this.isupdate) {
              //是编辑状态，禁止换行
              this.$refs.fileimportTable.setCurrentRow(this.fileImpParam);
              return false;
          } else {
              this.fileImpParam = row;
          }
      },
      btnDelete() {
          let delrow = this.$refs.fileimportTable.getCurrentRow();
          if (delrow) {
              this.actionindex = 3;
              this.$confirm("您确定要删除该" + delrow.fileimportname + "吗？", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
              })
              .then(() => {
                  this.$tool
                      .request({
                          url: "LIS/LIS3/LIS326",
                          method: "post",
                          data: {
                              action: "updfileimport",
                              colList: this.colList,
                              actionindex: this.actionindex,
                              fileImpParam: this.fileImpParam
                          }
                      })
                      .then(response => {
                          if (response.errcode == "1") {
                              this.$message({
                                  message: "操作成功！",
                                  type: "success"
                              });

                              var rowindex=this.fileimportList.indexOf(delrow);
                              this.fileimportList=this.fileimportList.filter((item)=>item.fileimportid != delrow.fileimportid);
                              this.$refs.fileimportTable.loadData(this.fileimportList).then(()=>{
                                  var havedata=this.$refs.fileimportTable.getTableData().fullData;
                                  if(rowindex>=havedata.length) rowindex=havedata.length-1;
                                  let selectrow=this.$refs.fileimportTable.afterFullData[rowindex];
                                  this.$refs.fileimportTable.setCurrentRow(selectrow);
                                  this.getcolList(selectrow.fileimportid);
                              });

                          } else {
                              this.$message({
                                  message: "保存失败！" + response.errmsg,
                                  type: "warning"
                              });
                          }
                      });
              })
              .catch(e => {});
          } else {
              this.$message({
                  message: "请选择要删除的记录！",
                  type: "warning"
              });
          }
      },
      SaveRecord() {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS326",
                  method: "post",
                  data: {
                      action: "updfileimport",
                      colList: this.colList,
                      actionindex: this.actionindex,
                      fileImpParam: this.fileImpParam
                  }
              })
              .then(response => {
                  if (response.errcode == "1") {
                      this.$message({
                          message: "操作成功！",
                          type: "success"
                      });
                      this.initData();
                      this.$refs.fileimportTable.setCurrentRow(this.fileImpParam);
                      this.isupdate = false;   
                  } else {
                      this.$message({
                          message: "保存失败！" + response.errmsg,
                          type: "warning"
                      });
                  }
              });
      },
      getcolList(fileimportid){
          this.$tool
          .request({
              url: "LIS/LIS3/LIS326",
              method: "post",
              data: {
                  action: "getsettingdetail",
                  fileimportid: fileimportid
              }
          })
          .then(res => {
              this.colList = res.data;
          })
          .catch(e => {
              console.log("error", e);
          });
      },
      // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
          this.$notify.warning({
              title: "警告",
              message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
          });
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
          this.form.file = file.raw;
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
          let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
          let size = file.size / 1024 / 1024;
          if (extension !== this.fileImpParam.filetype) {
              this.$notify.warning({
                  title: "警告",
                  message: `只能上传${fileImpParam.filetype}文件，且不超过10M`
              });
          }
          if (size > 10) {
              this.$notify.warning({
                  title: "警告",
                  message: `文件大小不得超过10M`
              });
          }
      },
      // 文件上传成功时的钩子
      handleSuccess(res, file, fileList) {
          this.$notify.success({
              title: "成功",
              message: `文件上传成功`
          });
      },
      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
          this.$notify.error({
              title: "错误",
              message: `文件上传失败`
          });
      },
      uploadFile() {
          if (this.rptunitid == "" || this.SampleDate == "") {
              this.$message({
                  message: "请选择报告单元和标本日期！",
                  type: "warning"
              });
              return false;
          }
          var URL = this.$tool.baseUrl.replace("api", "z") + "fileupload";
          let formData = new FormData();
          formData.append("file", this.form.file);
          formData.append("action", this.text.prgname);
          formData.append("filename", this.form.file.name);
          formData.append("fileimportid", this.tmpfileimp.fileimportid);
          formData.append("filetype", this.tmpfileimp.filetype);
          formData.append("startrow", this.tmpfileimp.startrow);
          formData.append("splitchar", this.tmpfileimp.splitchar);
          formData.append("encoding", this.tmpfileimp.encoding);
          formData.append("SampleDate", this.SampleDate);
          formData.append("rptunitname", this.rptunitname);
          formData.append("rptunitid", this.rptunitid);

          axios
              .post(URL, formData, { "Content-Type": "multipart/form-data" })
              .then(res => {
                  if (res.status == 200) {
                      if (res.data.flag == "-1") {
                          this.$message({
                              message: res.data.msg,
                              type: "error"
                          });
                          return false;
                      }
                      this.isshow = false;
                      this.tableData = res.data.msg;
                      this.fileList = [];
                      this.form.file = "";
                  } else {
                      this.flag = "0";
                      this.isshow = true;
                  }
                  this.isSuccess();
              })
              .catch(e => {
                  console.log("error", e);
              });
      },
      isSuccess() {}
  }
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
.modelset-content {
  display: flex;
  color: #000000;
  font-size: 12px;
}
.modelset-left {
  width: 205px;
}
.model-param {
  margin: 3px 0;
}
.model-text {
  width: 70px;
  margin: 0 5px 0 0;
  text-align: right;
  display: inline-block;
}
.modelset-right {
  width: 710px;
  height: 506px;
  margin-left: 5px;
}
.modelset-btn {
  margin: 5px 0;
  text-align: center;
}
.edit {
  width: 100%;
  padding: 5px;
  border-collapse: separate;
  border-spacing: 3px 4px;
}
.table1style tr td {
  padding: 0px 2px 0px 5px;
}
/deep/.middle-center tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
}
/deep/ .vxe-table .vxe-body--column.col-orange {
  background-color: #ccc;
}
/deep/ tr.vxe-body--row.row-modify {
  color: blue !important;
}
/deep/ tr.vxe-body--row.row-new {
  color: red !important;
}
</style>